<template>
  <div class="specialActivityList flex flex-col pb-20">
    <a-form layout="inline" size="small" :model="listParams">
      <a-form-item field="platformId" style="width: 350">
        <ms-date
          v-model:start="listParams.startTime"
          v-model:end="listParams.endTime"
          @dateChange="changeCurrent(1)"
        ></ms-date>
      </a-form-item>
      <a-form-item field="keyword" style="width: 350">
        <a-input
          v-model="listParams.keyword"
          placeholder="请输入"
          allow-clear
          @press-enter="changeCurrent(1)"
          @clear="changeCurrent(1)"
        />
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" @click="changeCurrent(1)">
            <template #icon> <icon-search /> </template>
            <span>搜索</span>
          </a-button>
          <a-button plain @click="onResetSearch()">
            <template #icon>
              <icon-sync />
            </template>
            <span>重置</span>
          </a-button>
        </a-space>
      </a-form-item>
    </a-form>
    <div class="flex flex-1" :style="{ overflowY: 'scroll' }">
      <a-spin :loading="loading" class="w-full h-full">
        <div class="card_wrapper mt-15 flex flex-wrap flex-1">
          <a-card
            :hoverable="true"
            :style="{ width: '300px', borderRadius: '10px' }"
            v-for="(item, index) in tableData"
            :key="index"
            class="m-10 card_item"
            :class="item.id == checkedValue ? 'checked' : ''"
          >
            <template #cover>
              <div
                class="card_wrapper"
                :style="{
                  height: '150px',
                  overflow: 'hidden',
                  position: 'relative'
                }"
              >
                <a-image width="100%" :src="item.image" show-loader :preview="false" alt="活动图片"> </a-image>
                <div class="overlay">
                  <div class="box-full flex-col-center">
                    <div
                      class="flex-center bgfff text333 text-size-14 w-44n h-9n round-18 cursor-pointer"
                      @click="onPreview(item)"
                    >
                      <icon-eye style="font-size: 20px" />
                      <span class="ml-4">预览</span>
                    </div>
                    <div
                      class="flex-center bg-theme textfff text-size-14 w-44n h-9n round-18 mt-8 cursor-pointer"
                      @click="onChange(item.id)"
                    >
                      <span class="text-size-20" v-if="item.id == checkedValue">✔</span>
                      <span class="ml-4">{{ item.id != checkedValue ? '选择' : '当前选择' }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </template>
            <a-card-meta>
              <template #title>
                <dl class="card_title">
                  <dt class="flex flex-a-c text-overflow-1">
                    <p class="text-overflow-1">{{ item.title || '暂无标题' }}</p>
                  </dt>
                  <dd class="text-size-14 text666 mt-10 mb-10 text-overflow-1">{{ item.description || '暂无描述' }}</dd>
                </dl>
              </template>
              <template #description>
                <div class="mt-10 text-size-12">创建时间：{{ item.createdAt }}</div>
              </template>
            </a-card-meta>
          </a-card>
        </div>
      </a-spin>
    </div>
    <div class="arco-table-pagination">
      <a-pagination v-bind="pagination" />
    </div>
  </div>
</template>
<script setup>
import { activityTemplateList, linkSelect } from '@/apis'
import { usePagination } from '@/hooks'
import { deleteEmpty } from '@/utils/common'
const props = defineProps(['tabCurrentInfo', 'displayInfo'])
const emit = defineEmits(['handleCheck'])
const loading = ref(false)
const tableData = ref([])
const checkedValue = ref()
const listParams = reactive({
  page: 1,
  size: 10,
  endTime: undefined,
  startTime: undefined,
  keyword: undefined,
  isMaster: 0
})
const { pagination, setTotal } = usePagination(() => getTableData(), { defaultPageSize: listParams.size })
// 获取列表数据
const getTableData = async () => {
  try {
    loading.value = true
    listParams.page = pagination.current
    listParams.size = pagination.pageSize
    const res = await activityTemplateList(deleteEmpty(listParams))
    tableData.value = res.data.data
    setTotal(res?.data?.total || 0)
  } finally {
    loading.value = false
  }
}
// 表格页码改变
const changeCurrent = (e) => {
  pagination.current = listParams.page = e
  getTableData()
}
// 搜索重置
const onResetSearch = () => {
  listParams.keyword = listParams.platformId = listParams.status = undefined
  changeCurrent(1)
}

watch(
  () => props.displayInfo,
  (newValue) => {
    if (newValue.typeId == 8 && newValue.id) {
      checkedValue.value = [Number(newValue.id)]
      listParams.id = newValue.id
    } else {
      checkedValue.value = undefined
    }
    listParams.isMaster = newValue.currentId == 8 ? 1 : 0
    changeCurrent(1)
  },
  { deep: true, immediate: true }
)
// 点击选择
const onChange = async (id) => {
  if (checkedValue.value == id) {
    emit('handleCheck')
    return
  }
  const itemData = tableData.value.find((item) => {
    return id === item.id
  })
  const res = await linkSelect({
    rule: props.tabCurrentInfo.rule,
    isLogin: props.tabCurrentInfo?.isLogin ?? undefined,
    param: {
      id: itemData.id,
      title: itemData.title
    }
  })
  emit('handleCheck', res.data ?? '')
}
</script>
<style lang="scss" scoped>
.specialActivityList {
  height: 100%;
  overflow: hidden;
  margin: $margin;
  background: var(--color-bg-1);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .card_title {
    border-bottom: solid 1px #eee;
  }
  .card_wrapper {
    flex-wrap: wrap;
    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.3); /* 设置遮罩层的颜色和透明度 */
      display: none; /* 初始时隐藏遮罩层 */
    }
    .card_item:hover .overlay {
      display: block; /* 鼠标放上去时显示遮罩层 */
    }
    .card_item {
      overflow: hidden;
      &.checked {
        border-color: rgb(var(--primary-6));
        box-shadow: 0px 0px 10px 0px rgb(var(--primary-4));
      }
    }
  }
  :deep(.arco-image-overlay) {
    height: 200px;
  }
}
.hover_box {
  width: 100%;
  height: 100%;
  background-color: #00000080;
  transition: opacity 0.5s ease;
  opacity: 0;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9;
  /* 初始设为透明 */
}

.hover_box:hover {
  opacity: 1;
  /* 鼠标悬停时设为不透明 */
}
.hover_box ul {
  li {
    background: var(--color-bg-1);
    margin: 10px 0;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 20px;
    font-size: 14px;
    cursor: pointer;
    border: solid 1px transparent;
    &:hover {
      border-color: $color-theme;
      background: $color-theme;
      color: #fff;
    }

    svg {
      margin-right: 10px;
      font-size: 16px;
    }
    :deep(.arco-switch) {
      width: 150px;
      line-height: 30px;
      height: 30px;
      border-radius: 20px;
    }
    :deep(.arco-switch-handle) {
      width: 22px;
      height: 22px;
    }
    :deep(.arco-switch-text) {
      left: 50% !important;
      transform: translate(-50%, 0px) !important;
      font-size: 14px;
    }
    :deep(.arco-switch-checked .arco-switch-handle) {
      left: calc(100% - 16px - 10px);
    }
    // .arco-switch-handle
  }
}
</style>
